<template>
  <div>
    <a-breadcrumb separator="">
      <a-breadcrumb-item href="">
        <a-icon type="home" />
      </a-breadcrumb-item>
      <a-breadcrumb-separator>>></a-breadcrumb-separator>

      <a-breadcrumb-item href="">
        <a-icon type="user" />
        <span>Application List</span>
      </a-breadcrumb-item>
      <a-breadcrumb-separator>>></a-breadcrumb-separator>
      <a-breadcrumb-item>
        Application
      </a-breadcrumb-item>
    </a-breadcrumb>

    <a-breadcrumb>
      <a-breadcrumb-item>Ant Design Vue</a-breadcrumb-item>
      <a-breadcrumb-item><a href="">Component</a></a-breadcrumb-item>
      <a-breadcrumb-item>
        <a href="">General</a>
        <a-menu slot="overlay">
          <a-menu-item>
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="http://www.alipay.com/"
            >
              General
            </a>
          </a-menu-item>
          <a-menu-item>
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="http://www.taobao.com/"
            >
              Layout
            </a>
          </a-menu-item>
          <a-menu-item>
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="http://www.tmall.com/"
            >
              Navigation
            </a>
          </a-menu-item>
        </a-menu>
      </a-breadcrumb-item>
      <a-breadcrumb-item>Button</a-breadcrumb-item>
    </a-breadcrumb>

    <a-breadcrumb :routes="routesList">
      <template
        slot="itemRender"
        slot-scope="{route, params, routes, paths}"
      >
        <span v-if="routesList.indexOf(route) === routesList.length - 1">
          {{route.breadcrumbName}}
        </span>
        <router-link
          v-else
          :to="paths.join('/')"
        >
          {{route.breadcrumbName}}
        </router-link>
      </template>
    </a-breadcrumb>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        routesList: [
          {
            path: 'index',
            breadcrumbName: 'home',
          },
          {
            path: 'first',
            breadcrumbName: 'first',
            children: [
              {
                path: '/general',
                breadcrumbName: 'General',
              },
              {
                path: '/layout',
                breadcrumbName: 'Layout',
              },
              {
                path: '/navigation',
                breadcrumbName: 'Navigation',
              },
            ],
          },
          {
            path: 'second',
            breadcrumbName: 'second',
          },
        ],
      };
    },
  };
</script>